<template>
  <div class="warp">
    <!-- 顶部结构 -->
    <div class="top">
      <div class="hosname">{{ workData.baseMap?.hosname }}</div>
      <div class="line"></div>
      <div class="Specialty">{{ workData.baseMap?.bigname }}</div>
      <div class="dot">.</div>
      <div class="hosdepartment">{{ workData.baseMap?.depname }}</div>
    </div>
    <!-- 中间结构 -->
    <div class="center">
      <div class="center_time">{{ workData.baseMap?.workDateString }}</div>
      <div class="center_container">
        <div
          @click="changeTime(item)"
          class="center_container_item"
          :class="{
            active: item.status == 0,
            cur: item.workDate == workTime.workDate,
          }"
          v-for="item in workData.bookingScheduleList"
          :key="item.workDateMd"
        >
          <div class="item_time">{{ item.workDate }} {{ item?.dayOfWeek }}</div>
          <div class="isHasReg">
            <div v-if="item.status == -1">停止预约</div>
            <div v-if="item.status == 0">
              {{
                item.availableNumber == -1 ? "无号" : `有号(${item?.docCount})`
              }}
            </div>
            <div v-if="item.status == 1">即将放号</div>
          </div>
        </div>
      </div>
      <!-- 分页器结构 -->
      <el-pagination
        v-model:current-page="pageNo"
        layout="prev, pager, next"
        :total="workData.total"
        @current-change="getHospitalWorkData"
      />
    </div>
    <!-- 底部结构 -->
    <div class="bottom">
      <!-- 即将放号展示区域 -->
      <div class="will" v-if="workTime.status == 1">
        2024年{{ workTime.workDateMd }}{{ workData.baseMap?.releaseTime }}放号
      </div>
      <!-- 医生|医生技能展示区域 -->
      <div class="doctor" v-else>
        <!-- 早上号源 -->
        <div class="marning">
          <div class="tip">
            <el-icon color="#409EFC" class="no-inherit">
              <Sunny />
            </el-icon>
            <span>上午号源</span>
          </div>
          <div class="doctor_info" v-for="doctor in moringArr" :key="doctor.id">
            <div class="left">
              <div class="doctor_message">
                <span>{{ doctor.title }}</span>
                <span class="gap">|</span>
                <span>{{ doctor.docname }}</span>
              </div>
              <div class="skill">{{ doctor.skill }}</div>
            </div>
            <div class="right">
              <div class="money">￥{{ doctor.amount }}</div>
              <el-button
                style="width: 80px"
                type="primary"
                @click="goStep2(doctor)"
                >剩余{{ doctor.availableNumber }}</el-button
              >
            </div>
          </div>
          <hr />
        </div>
        <!-- 下午号源 -->
        <div class="afternoon">
          <div class="tip">
            <el-icon color="#409EFC" class="no-inherit">
              <Sunset />
            </el-icon>
            <span>下午号源</span>
          </div>
          <div class="doctor_info" v-for="doctor in afterArr" :key="doctor.id">
            <div class="left">
              <div class="doctor_message">
                <span>{{ doctor.title }}</span>
                <span class="gap">|</span>
                <span>{{ doctor.docname }}</span>
              </div>
              <div class="skill">{{ doctor.skill }}</div>
            </div>
            <div class="right">
              <div class="money">￥{{ doctor.amount }}</div>
              <el-button style="width: 80px" type="primary" @click="goStep2(doctor)"
                >剩余{{ doctor.availableNumber }}</el-button
              >
            </div>
          </div>
          <hr />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { Sunny, Sunset } from "@element-plus/icons-vue";
// 引入API
import { reqHospitalWork, reqHospitalDoctor } from "@/api/hospital/index";
// 引入ts类型
import {
  HospitalWorkResponseData,
  DoctorResponseData,
  DocArr,
  Doctor,
  BookingSchedule,
} from "@/api/hospital/type";
// 引入路由/路由器
import { useRoute, useRouter } from "vue-router";
// 当前页码
let pageNo = ref<number>(1);
// 一页展示几条数据
let limit = ref<number>(6);
// 获取路由对象
let route = useRoute();
// 获取路由器对象
let router = useRouter();
// 存储预约的数据
let workData = ref<any>({});
//存储排班日期:当前数据的第一个
let workTime: any = ref({});
//存储排班医生的数据
let docArr = ref<DocArr>([]);
// 计算出上午排班的医生数据
let moringArr = computed(() => {
  return docArr.value.filter((doc: Doctor) => {
    return doc.workTime == 0;
  });
});
// 计算出下午排班的医生的数据
let afterArr = computed(() => {
  return docArr.value.filter((doc: Doctor) => {
    return doc.workTime == 1;
  });
});

// 组件挂载完毕
onMounted(() => {
  // 发请求获取排版数据
  getHospitalWorkData();
});
// 封装一个方法:获取预约数据
const getHospitalWorkData = async () => {
  // 发送请求获取预约数据
  const result: HospitalWorkResponseData = await reqHospitalWork(
    pageNo.value,
    limit.value,
    route.query.hoscode as string,
    route.query.depcode as string
  );
  if (result.code == 200) {
    // 存储预约的数据
    workData.value = result.data;
    //存储排班第一天的数据
    workTime.value = result.data.bookingScheduleList[0];
    // 调用获取医生排班数据的方法
    getDoctorWorkData();
  }
};
// 获取某一天医生排班的数据
const getDoctorWorkData = async () => {
  // 医院编号
  let hoscode = route.query.hoscode as string;
  // 科室的编号
  let depcode = route.query.depcode as string;
  // 工作日期
  let workDate = workTime.value.workDate;
  // 发送请求获取医生排班的数据
  const result: DoctorResponseData = await reqHospitalDoctor(
    hoscode,
    depcode,
    workDate
  );
  if (result.code == 200) {
    docArr.value = result.data;
  }
};
// 点击顶部某一天的时候修改日期的回调
const changeTime = (item: BookingSchedule) => {
  //存储用户选择那一天的数据
  workTime.value = item;
  //再发一次获取医生排班的数据
  getDoctorWorkData();
};
// 点击剩余跳转到就诊人页面
const goStep2 = (doctor: Doctor) => {
  // 编程式导航进行路由跳转且携带医生的ID
  router.push({
    path: "/hospital/register_step2",
    query: { docId: doctor.id },
  });
};
</script>
<script lang="ts">
export default {
  name: "RegisterStep1",
};
</script>

<style scoped lang="scss">
.warp {
  margin-top: 20px;

  .top {
    display: flex;
    font-size: 16px;
    color: #7f7f7f;

    .hosname {
      padding-right: 10px;
      border-right: 2px solid #7f7f7f;
    }

    .Specialty {
      margin-left: 10px;
    }

    .dot {
      margin: 0px 5px;
      font-weight: 700;
    }
  }

  .center {
    margin-top: 50px;
    color: #7f7f7f;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .center_time {
      font-weight: 700;
    }

    .center_container {
      display: flex;
      margin: 20px 0px;
      width: 100%;

      .center_container_item {
        flex: 1;
        margin: 0px 8px;
        border: 1px solid #6eb3ff;
        transition: all 0.5s;

        .item_time {
          height: 40px;
          text-align: center;
          font-weight: 700;
          line-height: 40px;
          background-color: #c0dcfa;
        }

        .isHasReg {
          height: 50px;
          text-align: center;
          line-height: 50px;
        }
        &.cur {
          transform: scale(1.1);
          border: 2px solid #6eb3ff;
        }
      }
    }
  }

  .bottom {
    .will {
      font-weight: 700;
      color: skyblue;
      text-align: center;
      margin: 30px 0px;
      font-size: 24px;
    }

    .doctor {
      .marning,
      .afternoon {
        margin-top: 30px;
        .tip {
          color: #7f7f7f;
          display: flex;
          font-weight: 500;
          font-size: 16px;
          margin: 10px 0px;
        }

        .doctor_info {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            .doctor_message {
              margin: 15px 0px;
              color: skyblue;
              font-size: 16px;
              font-weight: 700;

              .gap {
                margin: 0px 10px;
              }
            }

            .skill {
              color: #7f7f7f;
              font-size: 16px;
            }
          }

          .right {
            margin-right: 20px;
            display: flex;
            align-items: center;

            .money {
              color: #7f7f7f;
              font-size: 16px;
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
